<template>
      <img alt="Blog logo" src="@/assets/blogLogo.png" width="400" height="120">

    <div class="login">

        <el-container>

            <el-header>
                <h1>欢迎使用 F-Blog 氢客</h1>
            </el-header>

            <el-main>
                <div style="text-align: -webkit-center">
                    <el-form-item label-width="100px" style="width: max-content">
                        <el-col :span="18" >
                            账号：<el-input v-model="user.username" name="username">
                            </el-input>
                            密码：<el-input type="password" show-password=true v-model="user.password" name="password">
                            </el-input>
                            <div>
                                <br>
                                <el-button type="success" @click="onLoginSubmit" :disabled="loginButtonStatus">点击登录</el-button>
                                <el-button type="primary" @click="onRegisterSubmit">前往注册</el-button>
                            </div>
                        </el-col>
                    </el-form-item>
                </div>
            </el-main>


            <el-footer>
                FxTG-Blog Studio
            </el-footer>
        </el-container>
    </div>

</template>

<script>
import { ElMessage } from 'element-plus'
import router from '@/router'
import { userLogin } from '@/api/user.js'

export default {
    name: "UserLogin",
    data() {
        return {
            loginButtonStatus: false,
            user: {
                username: '',
                password: '',
                profile_photo: '',
                phone_number: '',
                money: '',
            },
            msg:{
                Code : '',
                data: '',
            }
        }
    },
    methods:{
        onLoginSubmit(){
            console.log("login")
            //禁用按钮
            this.intervalShowButton();
            
            //清除头尾空格
            this.user.username = this.user.username.trim()


            //校验表单数据
            //用户名：由手机号组成，必须为11位
            var usernamePattern = /0?(13|14|15|17|18)[0-9]{9}/

            //校验用户名
            if(!usernamePattern.test(this.user.username)){
                ElMessage.error('用户名由手机号组成，必须为11位')
                return false
            }


            //校验是否存在于数据库
            //发送axios请求
            userLogin(this.user).then(res => {
                this.msg = res.data

                console.log("解析请求中")
                setTimeout(() => {
                    console.log("解析完成")
                }, 10)

                return res.data
                
            }).catch(err => {
                console.log(err)
            }).finally(() => {
                console.log(this.msg)
                setTimeout(() => {
                    //等待
                    this.loginVerify()
                }, 1000)
            })
        },
        //登录验证
        loginVerify(){
            if(this.msg.Code === "202"){
                //登录成功
                //弹出气泡提示
                ElMessage({
                    message: '登录成功',
                    type: 'success',
                })
                //存入vuex
                //store.user.myUserInfo = this.user
                //跳转到主页
                router.push("/SystemIndex")
                return true
            }else{
                //登录失败
                ElMessage.error('登录失败，请检查用户名或密码后重试')
            }
        },
        onRegisterSubmit(){
            console.log("register")

            //跳转到主页
            router.push("/register")
        },
        //按钮恢复计时
        intervalShowButton() {
            this.loginButtonStatus = true;
            let _this = this;
            this.timer = setTimeout(() => {
                _this.loginButtonStatus = false;
            }, 2000);
        },
}
}
</script>

<style scoped>
.login {
  width: 100%;
  height: 100%;
  min-width: 1000px;
  background-size: 100% 100%;
  background-position: center center;
  overflow: auto;
  background-repeat: no-repeat;
  position: fixed;
  line-height: 100%;
  padding-top: 150px;
  margin: 0 auto;
  text-align: center;
}
</style>